<template>
    <div class="content">
        <div class="head">
            <div class="logo">
                <span>再生道环保</span>
            </div>
            <div class="right-btn">
                <button class="link-other">联系我们</button>
                <router-link to="/" class="into-home">首页</router-link>
            </div>
        </div>

        <div class="form-content">
            <h1 class="title">{{ isLogin ? '登录' : '注册' }}</h1>
            <h3 class="tips">{{ isLogin ? '欢迎回来' : '填写信息完成注册' }}</h3>
            
            <!-- 登录表单 -->
            <div v-if="isLogin" class="input-wrapper">
                <div class="login-type-switch">
                    <span 
                        :class="{ active: loginType === 'account' }" 
                        @click="loginType = 'account'"
                    >账号密码登录</span>
                    <span 
                        :class="{ active: loginType === 'mobile' }" 
                        @click="loginType = 'mobile'"
                    >手机号登录</span>
                </div>

                <!-- 账号密码登录 -->
                <template v-if="loginType === 'account'">
                    <el-input
                        v-model="loginForm.phone"
                        placeholder="手机号"
                        prefix-icon="el-icon-mobile-phone"
                        class="custom-input"
                    ></el-input>
                    <el-input
                        v-model="loginForm.password"
                        placeholder="密码"
                        prefix-icon="el-icon-lock"
                        type="password"
                        class="custom-input"
                        @keyup.enter.native="handleSubmit"
                    ></el-input>
                </template>

                <!-- 手机号登录 -->
                <template v-if="loginType === 'mobile'">
                    <el-input
                        v-model="mobileForm.phone"
                        placeholder="手机号"
                        prefix-icon="el-icon-mobile-phone"
                        class="custom-input"
                    ></el-input>
                    <el-input 
                        v-model="mobileForm.signUpCode" 
                        placeholder="验证码"
                        prefix-icon="el-icon-message"
                        class="custom-input verify-input">
                        <el-button 
                            slot="append" 
                            @click="sendVerifyCode" 
                            :disabled="cooldown > 0"
                            class="verify-btn">
                            {{ cooldown > 0 ? `${cooldown}s` : '获取验证码' }}
                        </el-button>
                    </el-input>
                </template>
            </div>

            <!-- 注册表单 -->
            <div v-else class="input-wrapper">
                <el-input
                    v-model="registerForm.name"
                    placeholder="姓名"
                    prefix-icon="el-icon-user"
                    class="custom-input"
                ></el-input>
                <el-input
                    v-model="registerForm.phone"
                    placeholder="手机号"
                    prefix-icon="el-icon-mobile-phone"
                    class="custom-input"
                >
                <el-button 
                        slot="append" 
                        @click="sendSignUpCode" 
                        :disabled="regCooldown > 0"
                        class="verify-btn">
                        {{ regCooldown > 0 ? `${regCooldown}s` : '获取验证码' }}
                    </el-button>
                </el-input>
                <el-input
                    v-model="registerForm.password"
                    placeholder="密码"
                    prefix-icon="el-icon-lock"
                    type="password"
                    class="custom-input"
                ></el-input>
                <el-input
                    v-model="registerForm.idCardNum"
                    placeholder="身份证号"
                    prefix-icon="el-icon-document"
                    class="custom-input"
                ></el-input>
                <el-input 
                    v-model="registerForm.signUpCode" 
                    placeholder="验证码"
                    prefix-icon="el-icon-message"
                    class="custom-input">

                </el-input>
            </div>

            <button class="btn" @click="handleSubmit">{{ isLogin ? '登录' : '注册' }}</button>
            
            <div class="request">
                {{ isLogin ? '没有账号？' : '已有账号？' }}
                <span @click="switchMode">{{ isLogin ? '立即注册' : '返回登录' }}</span>
            </div>
        </div>

        <div class="Copyright">
            Copyright © 再生道环保 2024 | <a href="#" target="_blank">再生道科技</a>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Login',
    data() {
        return {
            isLogin: true,
            loginType: 'account',
            cooldown: 0,
            regCooldown: 0,
            loginForm: {
                phone: '',
                password: ''
            },
            mobileForm: {
                phone: '',
                signUpCode: ''
            },
            registerForm: {
                name: '',
                phone: '',
                password: '',
                idCardNum: '',
                signUpCode: ''
            }
        }
    },
    methods: {
        switchMode() {
            this.isLogin = !this.isLogin
            this.loginType = 'account'
            // 清空所有表单
            this.loginForm = { phone: '', password: '' }
            this.mobileForm = { phone: '', signUpCode: '' }
            this.registerForm = { name: '', phone: '', password: '', idCardNum: '', signUpCode: '' }
        },
        async handleSubmit() {
            if (this.isLogin) {
                this.loginType === 'account' ? this.handleAccountLogin() : this.handleMobileLogin()
            } else {
                this.handleRegister()
            }
        },
        async handleAccountLogin() {
            try {
                const response = await this.$http.post('/userService/user/login', this.loginForm)
                if (response.data.code === 200) {
                    localStorage.setItem('userId', response.data.data.userId)
                    localStorage.setItem('token', response.headers['token'])
                    this.$message.success('登录成功')
                    this.$router.push('/user/orders')
                } else {
                    this.$message.error(response.data.message || '登录失败')
                }
            } catch (error) {
                this.$message.error('登录失败')
            }
        },
        async handleMobileLogin() {
            try {
                const response = await this.$http.post('/userService/user/mobileLogin', this.mobileForm)
                if (response.data.code === 200) {
                    localStorage.setItem('userId', response.data.data.userId)
                    localStorage.setItem('token', response.data.data.token)
                    this.$message.success('登录成功')
                    this.$router.push('/')
                } else {
                    this.$message.error(response.data.message || '登录失败')
                }
            } catch (error) {
                this.$message.error('登录失败')
            }
        },
        handleRegister() {
            this.$http.post('/userService/user/signUp', this.registerForm).then(resp=>{
                if (resp.data.code === 200) {
                    this.$message.success('注册成功')
                    this.isLogin = true
                } else {
                    this.$message.error(resp.data.message || '注册失败')
                }
            })
            
            
        },
        async sendVerifyCode() {
            if (!this.mobileForm.phone) {
                this.$message.warning('请输入手机号')
                return
            }
            this.$http.get('/userService/user/sendSignUpCode', {
                params: {
                    phone:this.mobileForm.phone
                }              
            }).then(res => {
                if (res.data.code === 200) {
                    this.$message.success('验证码发送成功')
                } else {
                    this.$message.error(res.data.message || '验证码发送失败')
                console.log(res)
            }
        })},
        sendSignUpCode() {
            //正则表达式判断是否符合手机号格式
            const phoneReg = /^1[3-9]\d{9}$/
            if (!phoneReg.test(this.registerForm.phone)) {
                this.$message.warning('请输入正确的手机号')
                return
            }
            this.$http.get('/userService/user/sendSignUpCode', {
                params: {
                    phone: this.registerForm.phone
                }
            }).then(res => {
                if (res.data.code === 200) {
                    this.$message.success('验证码发送成功')
                } else {
                    this.$message.error(res.data.message || '验证码发送失败')
                }
            })
        }
    }
}
</script>

<style scoped>
.component-fade-enter-active, .component-fade-leave-active {
    transition: opacity .3s ease;
}
.component-fade-enter, .component-fade-leave-to {
    opacity: 0;
}



* {
    padding: 0;
    margin: 0;
}

.content {
    width: 100vw;
    height: 100vh;
    background-color: #f0f9eb;
    position: relative;
    overflow: hidden;
}

.content .head {
    width: 100%;
    height: 50px;
    position: fixed;
    left: 0;
    top: 0;
    padding: 1% 5%;
    display: flex;
    box-sizing: border-box;
}

.content .head .logo {
    width: 30%;
    font-family: PlastoTrial_ExtraBold;
    font-size: 50px;
    color: #67c23a;
}

.content .head .right-btn {
    flex: 1;
}

.content .head .right-btn .into-home {
    float: right;
    line-height: 50px;
    font-family: PlastoTrial_ExtraBold;
    font-size: 20px;
    cursor: pointer;
    color: #67c23a;
}

.content .head .right-btn .link-other {
    float: right;
    margin-left: 3%;
    width: 150px;
    height: 50px;
    border: 0;
    background-color: #67c23a;
    color: white;
    border-radius: 8px;
    font-family: PlastoTrial_ExtraBold;
    font-size: 18px;
    cursor: pointer;
    transition: 0.5s;
}

.content .head .right-btn .link-other:hover {
    background-color: #85ce61;
}

.content .form-content {
    width: 400px;
    background-color: #fff;
    border-radius: 30px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 50px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 移除背景图片相关的伪元素 */
.content .form-content::before,
.content .form-content::after {
    display: none;
}

.content .form-content .title {
    margin: 4% 0;
    font-family: PlastoTrial_ExtraBold;
}

.content .form-content .tips {
    font-size: 16px;
    margin-bottom: 8%;
    font-family: PlastoTrial_ExtraLight;
}

.content .form-content .input-wrapper {
    width: 100%;
    margin: 2% 0;
}

.content .form-content .input-wrapper input {
    width: 100%;
    height: 50px;
    outline: none;
    margin: 10px 0;
    border: 1px solid rgb(231, 231, 231);
    border-radius: 10px;
    box-sizing: border-box;
    padding: 10px 20px;
    font-family: PlastoTrial_ExtraBold;
    font-size: 20px;
    transition: 0.2s;
}

.content .form-content .input-wrapper input:focus {
    border: 1px solid #000;
}

.content .form-content .forgot-pwd {
    width: 100%;
    margin-bottom: 6%;
    font-family: PlastoTrial_ExtraBold;
}

.content .form-content .forgot-pwd span {
    float: left;
    cursor: pointer;
}

.content .form-content .btn {
    width: 100%;
    height: 40px;
    background-color: #67c23a;
    color: white;
    border-radius: 10px;
    border: 0;
    font-family: PlastoTrial_ExtraBold;
    font-size: 16px;
    cursor: pointer;
    transition: 0.3s;
}

.content .form-content .btn:hover {
    box-shadow: 1px 10px 32px 1px rgba(103, 194, 58, 0.37);
    background-color: #85ce61;
}

.content .form-content .other-login {
    width: 100%;
    margin: 3%;
}

.content .form-content .other-login .divider {
    width: 100%;
    margin: 20px 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.content .form-content .other-login .divider .line {
    width: 5%;
    display: inline-block;
    height: 1px;
    background-color: #000;
}

.content .form-content .other-login .divider .divider-text {
    font-family: PlastoTrial_ExtraBold;
    vertical-align: middle;
    margin: 0 10px;
    display: inline-block;
    color: #000;
    white-space: nowrap;
}

.content .form-content .other-login .other-login-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.content .form-content .other-login .other-login-wrapper .other-login-item {
    width: 110px;
    height: 30px;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    font-weight: 600;
    margin: 0 10px;
    transition: 0.5s;
    background-color: #fff;
    border-radius: 10px;
    border: 1px solid rgb(231, 231, 231);
}

.content .form-content .other-login .other-login-wrapper .other-login-item svg {
    width: 30px;
    height: 30px;
    fill: #000;
    vertical-align: middle;
}

.content .form-content .other-login .other-login-wrapper .other-login-item span {
    vertical-align: middle;
}

.content .form-content .other-login .other-login-wrapper .other-login-item:hover {
    background-color: #fff;
    border: 1px solid #000;
    box-shadow: 1px 10px 32px 1px rgba(186, 175, 221, 0.37);
}

.content .form-content .other-login .other-login-wrapper .other-login-item:hover svg {
    fill: #000;
}

.content .form-content .request {
    margin: 5% 0;
    font-family: PlastoTrial_ExtraLight;
}

.content .form-content .request span {
    font-weight: 900;
    cursor: pointer;
    font-family: PlastoTrial_ExtraBold;
    margin-left: 5px;
}

.Copyright {
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    text-align: center;
    color: #67c23a;
}

.Copyright a {
    color: #67c23a;
    text-decoration: none;
}

.Copyright a:hover {
    text-decoration: underline;
}

/* 登录方式切换样式 */
.login-type-switch {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
    border-bottom: 1px solid #e4e7ed;
}

.login-type-switch span {
    flex: 1;
    text-align: center;
    padding: 15px 0;
    cursor: pointer;
    font-family: PlastoTrial_ExtraBold;
    color: #606266;
    position: relative;
    transition: all 0.3s;
}

.login-type-switch span.active {
    color: #67c23a;
}

.login-type-switch span.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #67c23a;
}

/* 输入框统一样式 */
.custom-input {
    margin: 10px 0;
}

.custom-input :deep(.el-input__inner) {
    height: 50px;
    border-radius: 10px;
    font-family: PlastoTrial_ExtraBold;
    font-size: 16px;
    padding-left: 45px;
}

.custom-input :deep(.el-input__prefix) {
    left: 15px;
    color: #67c23a;
}

.custom-input :deep(.el-input__icon) {
    font-size: 20px;
    line-height: 50px;
}

/* 验证码输入框特殊样式 */
.verify-input :deep(.el-input__inner) {
    border-radius: 10px 0 0 10px;
}

.verify-input :deep(.el-input-group__append) {
    padding: 0;
    border: none;
    background: transparent;
}

.verify-btn {
    height: 50px;
    padding: 0 20px;
    border: 1px solid #67c23a;
    border-radius: 0 10px 10px 0;
    font-family: PlastoTrial_ExtraBold;
    font-size: 16px;
    background-color: #fff;
    color: #67c23a;
    transition: all 0.3s;
    min-width: 120px;
}

.verify-btn:hover:not(:disabled) {
    background-color: #67c23a;
    color: #fff;
}

.verify-btn:disabled {
    border-color: #c0c4cc;
    color: #c0c4cc;
    background-color: #f5f7fa;
    cursor: not-allowed;
}

/* 移除原有的验证码样式 */
.verify-code {
    display: none;
}
</style>